<template>
	<view class="pageV">
		<u-navbar title="客源流失分析" placeholder :autoBack="true" leftIconColor="#fff" bgColor="#111111"
			:titleStyle="titleStyle">

		</u-navbar>
		<!-- <view class="fone">
			<view class="foneitem factive">本月</view>
			<view class="foneitem">本年</view>
			<view class="foneitem">累计</view>
		</view> -->
		<!-- <view class="ztwo" v-if="lei == 1">
			<view class="zgui">
				<view class="zguiitemone">
					<text class="painameone">排名</text>
					<view class="numview" v-for="(item,index) in navlist" :key="index">
						<text class="painame">{{item.id}}</text>
					</view>
				</view>
				<scroll-view class="zguiview" scroll-x>
					<view class="znews">
						<view class="rowitem">
							<view class="rowtit" :class="item.name=='掌柜姓名'?'ractive':''" :style="{width:tabwidth+'rpx',minWidth:tabwidth+'rpx',maxWidth:tabwidth+'rpx'}" v-for="(item,index) in biaolist" :key="index">
								<text class="rowname">{{item.name}}</text>
								<view class="shangview" v-if="index > 1">
									<image src="/shop/static/shang.png" class="shang"></image>
									<image src="/shop/static/shang.png" class="shang" style="transform: rotate(180deg);"></image>
								</view>
							</view>
						</view>
						<view class="rowitem" v-for="(item,index) in navlist" :key="index">
							<view class="rowmiao" :style="{width:tabwidth+'rpx',minWidth:tabwidth+'rpx',maxWidth:tabwidth+'rpx'}" v-for="(item,index) in biaolist" :key="index">
								<text class="rowmiaoname txt">100</text>
							</view>
						</view>
						
					</view>
					
				</scroll-view>

			</view>
		</view> -->
		<view class="mxilist" v-if="lei == 2">
			<view class="mxitem" v-for="(item,index) in list" :key="index">
				<text class="nums">{{ item.title }}</text>
				<u-line-progress :percentage="item.bfb" height="6" :showText="false" inactiveColor="rgba(204, 204, 204, 0.3)" activeColor="rgba(212, 255, 69, 1)"></u-line-progress>
				<view class="xitem" style="margin-top: 10rpx;">
					<text class="xleft">消费人数</text>
					<text class="ml">{{item.yes}}</text>
				</view>
				<view class="xitem">
					<text class="xleft">人数占比</text>
					<text class="ml">{{item.bfb}}%</text>
				</view>
				<view class="xitem">
					<text class="xleft">消费金额</text>
					<text class="ml">{{item.money}}</text>
				</view>
				<view class="xitem">
					<text class="xleft">平均客单价</text>
					<text class="ml">{{item.price}}</text>
				</view>
			</view>
		</view>
		<!-- <view class="zhuanbot">
			<view class="zitem" :class="lei == 1?'zactive':''" @click="botCLick(1)">
				<image src="/shop/static/bones.png" class="bones" v-if="lei == 1"></image>
				<image src="/shop/static/bone.png" class="bones" v-if="lei == 2"></image>
				<text class="huiname">汇总</text>
			</view>
			<view class="zitem" :class="lei == 2?'zactive':''" @click="botCLick(2)">
				<image src="/shop/static/btwo.png" class="bones" v-if="lei == 1"></image>
				<image src="/shop/static/btwos.png" class="bones" v-if="lei == 2"></image>
				<text class="huiname">明细</text>
			</view>
		</view> -->
		


		<!-- <view  v-if="mRoleList.length==0" class="noV">
				<image src="https://s1.ax1x.com/2023/04/19/p9FHmWR.png" mode="aspectFill"></image>
				<view>咦~，一片空白，还没有数据呢</view>
			</view> -->
</view>
</template>

<script>

export default {
	data() {
		return {
			titleStyle: {
				"color": "#ffffff"
			},
			list: [],
			pos: -1,
			type: 0,//是否是第一次进来  0第一次  1第二次
			tabwidth:'140',
			biaolist:[
				{name:'掌柜姓名'},{name:'拓客数量'},{name:'已消费人数'},{name:'未消费人数'},
				{name:'预计未消费金额'}
			],
			navlist:[
				{id:1,name:'张三',nums:'100',zhanbi:'52.17%'},
				{id:2,name:'张三',nums:'100',zhanbi:'52.17%'},
				{id:3,name:'张三',nums:'100',zhanbi:'52.17%'},
				{id:4,name:'张三',nums:'100',zhanbi:'52.17%'},
				{id:5,name:'张三',nums:'100',zhanbi:'52.17%'},
				{id:6,name:'张三',nums:'100',zhanbi:'52.17%'},
				{id:7,name:'张三',nums:'100',zhanbi:'52.17%'},
				{id:8,name:'张三',nums:'100',zhanbi:'52.17%'},

			],
			lei:2,//1汇总 2明细,
			mRoleId:-1,

		}
	},
	onLoad(e) {
		this.mRoleId = e.mRoleId;
		this.getLiushi()
	},
	methods: {
		getLiushi() {
			this.$api.getLiushi({
				role_id:this.mRoleId,
			}).then((res) => {
				// console.log(res)
				this.list = res.data;
			}).catch((e) => {
				uni.$u.toast(e.msg === undefined ? "请求失败" : e.msg)
			})
		},
		botCLick(e){
			this.lei = e
		}
	}
}
</script>

<style lang="scss">
.pageV {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	padding-bottom: 150rpx;
	
}

.zhuanbot{
	height: 98rpx;
	opacity: 1;
	background: rgba(31, 31, 31, 1);
	position: fixed;
	bottom: 0;
	width: 100%;
	// padding: 20rpx 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	.zitem{
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 60%;
		border-right: 1rpx solid rgba(115, 115, 115, 1);
		.bones{
			width: 35rpx;
			height: 35rpx;
			margin-right: 8rpx;
		}
		.huiname{
			font-size: 32rpx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 44.8px;
			color: rgba(255, 255, 255, 1);
		}
	}
	.zactive{
		.huiname{
			color: rgba(212, 255, 69, 1);
		}
	}
	.zitem:last-child{
		border-right: none;
	}

}

.fone {
	display: flex;
	flex-direction: row;
	margin: 30rpx 30rpx 0;

	.foneitem {
		width: 140rpx;
		height: 60rpx;
		opacity: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(51, 51, 51, 1);
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(147, 147, 147, 1);

	}

	.factive {
		background: rgba(212, 255, 69, 1);
		color: rgba(51, 55, 55, 1);
	}

	.foneitem:first-child {
		border-radius: 5rpx 0px 0px 5rpx;
	}

	.foneitem:last-child {
		border-radius: 0px 5rpx 5rpx 0px;
	}

}
.ztwo{
	display: flex;
	flex-direction: column;
}
.zgui {
	position: relative;
	// padding-left: 100rpx;
	padding: 30rpx 20rpx;
	display: flex;
	flex-direction: row;
}

.zguiitemone {
	position: absolute;
	left: 0;
	width: 100rpx;
	text-align: center;
	display: flex;
	flex-direction: column;
	.numview{
		width: 100rpx;
		text-align: center;
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(232, 232, 232, 1);
		height: 75rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

}
.shangview{
	display: flex;
	flex-direction: column;
	margin-left: 5rpx;
	.shang{
		width: 9rpx;
		height: 5rpx;
		margin-top: 4rpx;
	}
}


.painameone {
	font-size: 24rpx;
	font-weight: 400;
	color: rgba(147, 147, 147, 1);
	// color: #fff;
	text-align: center;
	display: inline-block;
	height: 75rpx;
	display: flex;
    align-items: center;
    justify-content: center;
}

.zguiview {
	position: relative;
	margin-left: 100rpx;
	width: 86%;
	white-space: nowrap;
	padding-right: 100rpx;
	.znews{
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.one{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		width: 100rpx;
		text-align: center;
		height: 75rpx;
		.painame{
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(147, 147, 147, 1);
		}
	}
	.two{
		.painame{
			font-size: 22rpx;
			font-weight: 400;
			color: rgba(232, 232, 232, 1);
		}
	}
	
	.zright {

		.rname {
			width: 100rpx;
			text-align: center;
			font-size: 22rpx;
			font-weight: 400;
			color: rgba(147, 147, 147, 1);
			text-align: center;
		}
	}
}
.rowitem{
	display: flex;
	flex-direction: row;
	align-items: center;
}
.rowtit{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	width: 200rpx;
	text-align: center;
	height: 75rpx;
	// margin-right: 20rpx;
	min-width: 200rpx;
	max-width: 200rpx;
	white-space: normal;
	padding: 0 8rpx;
	.rowname{
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(147, 147, 147, 1);
	}
	.shang{
		width: 10rpx;
		height: 8rpx;
		margin-top: 4rpx;
	}
}
.ractive{
	.rowname{
		color: rgba(212, 255, 69, 1) !important;
	}
}
.rowmiao{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	width: 150rpx;
	min-width: 150rpx;
	max-width: 150rpx;
	text-align: center;
	height: 75rpx;
	// margin-right: 20rpx;
	white-space: normal;
	.rowmiaoname{
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(232, 232, 232, 1);

	}
	.shang{
		width: 10rpx;
		height: 8rpx;
		margin-top: 4rpx;
	}
}

// 明细样式

.mxilist{
	padding: 30rpx;
	display: flex;
	flex-direction: column;
	.mxitem{
		display: flex;
		flex-direction: column;
		border-radius: 10rpx;
		background: rgba(31, 31, 31, 1);
		padding: 30rpx;
		margin-bottom: 20rpx;
		.nums{
			font-size: 32rpx;
			font-weight: 400;
			display: block;
			margin-bottom: 10rpx;
			color: rgba(255, 255, 255, 1);
		}
		.xitem{
			display: flex;
			margin-top: 10rpx;
			flex-direction: row;
			align-items: center;
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(147, 147, 147, 1);
			.ml{
				margin-left: auto;
			}
		}
	}
}

.txt{
	overflow: hidden;  //超出隐藏
	white-space: nowrap; //不折行
	text-overflow: ellipsis; //溢出显示省略号
}

.noV {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-top: 100rpx;

	image {
		width: 360rpx;
		height: 194rpx;
	}

	view {
		font-size: 28rpx;
		color: #999999;
		margin-top: 47rpx;
	}
}</style>